<template>
	<div class="app-container">
		<el-card shadow="never" class="menu-card">
			<template #header>
				<div class="header_box">
					<el-input v-model="dictName" placeholder="字典名称搜索" clearable @change="handleOnChange"></el-input>
					<el-button type="primary" style="margin-left: 10px;" @click="add({})">新增</el-button>
				</div>
			</template>
			<el-table :data="typeList" ref="typeListRef" :show-header="false" :highlight-current-row="true" @row-click="handleOnClick">
				<el-table-column label="dictName" prop="dictName"></el-table-column>
				<el-table-column label="操作" align="right">
					<template #default="{ row }">
						<el-button type="text" @click.stop="add(row)">编辑</el-button>
						<el-button type="text" @click.stop="del(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card shadow="never" class="body-card">
			<template #header>
				<el-form :model="form" ref="formRef" inline>
					<el-form-item>
						<div class="header_title">字典数据</div>
					</el-form-item>
					<el-form-item label="名称" prop="dictLabel">
						<el-input v-model="form.dictLabel" placeholder="输入名称搜索"></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="status">
						<el-select v-model="form.status" placeholder="请选择状态">
							<el-option label="正常" value="1"></el-option>
							<el-option label="禁用" value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="queryDetail">搜索</el-button>
						<el-button @click="restDetail">重置</el-button>
						<el-button type="primary" @click="addDictDetailbtn({})">新增</el-button>
					</el-form-item>
				</el-form>
			</template>
			<el-table :data="tableData">
				<el-table-column label="名称" align="center" prop="dictLabel"></el-table-column>
				<el-table-column label="键值" align="center" prop="dictValue"></el-table-column>
				<el-table-column label="类型" align="center" prop="dictType"></el-table-column>
				<el-table-column label="状态" align="center" prop="status">
					<template #default="{ row }">
						<el-tag type="success" v-if="row.status == '1'">正常</el-tag>
						<el-tag type="danger" v-else>禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center" prop="remark"></el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="{ row }">
						<el-button v-if="row.status == '1'" type="text" @click.stop="changeStatus(row, '0')">停用</el-button>
						<el-button v-else type="text" @click.stop="changeStatus(row, '1')">启用</el-button>
						<el-button type="text" @click.stop="addDictDetailbtn(row)">编辑</el-button>
						<el-button type="text" @click.stop="delDictDatabtn(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-if="queryParams.total > 0" class="pagination-footer" :total="queryParams.total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="queryDetail()"/>

			<addDictType ref="addDictTypeRef" @rest="restQuery"></addDictType>
			<addDictDetail ref="addDictDetailRef" :typeList="typeList" @rest="restQueryDetail"></addDictDetail>
		</el-card>
	</div>
</template>
<script>
import { nextTick, onMounted, reactive, toRefs } from "vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import {getDictTypeList, getDictListByType, deleteDictType, deleteDictData, updateDictDataStatus } from "@/api/system/sysdict.js"
import addDictType from "./components/addDictType.vue"
import addDictDetail from "./components/addDictDetail.vue"

export default {
	name: "dict",
	components: { addDictType, addDictDetail },
	setup() {
		const data = reactive({
			title: "字典管理",
			typeList: [],
			tableData: [],
			form: {},
			formRef: null,
			typeListRef: null,
			addDictTypeRef: null,
			addDictDetailRef: null,
			dictName: '',
			selectType: '',
			queryParams: { pageNo: 1, pageSize: 10, total: 0 },
		})


		const query = () => {
			getDictTypeList({
				dictName: data.dictName
			}).then(res => {
				data.typeList = res.data.rows
				if(data.typeList.length == 0){
					data.tableData = []
					data.queryParams.total = 0
					return
				}
				data.selectType = data.typeList[0].dictType
				queryDetail()
				nextTick(() => {
					data.typeListRef.setCurrentRow(data.typeList[0])
				})
			})
		}

		const handleOnChange = (val) => {
			query()
		}

		const handleOnClick = (row) => {
			data.selectType = row.dictType
			queryDetail()
		}

		const add = (row) => {
			nextTick(()=>{
				data.addDictTypeRef.openDialog(row)
			})
		}

		const addDictDetailbtn = (row) => {
			nextTick(()=>{
				data.addDictDetailRef.openDialog(row, data.selectType)
			})
		}

		const restQueryDetail = () => {
			queryDetail()
		}

		const del = (row) => {
			ElMessageBox.confirm(
				'确认是否删除此类型?',
				'删除',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}
		)
			.then(() => {
				deleteDictType({
					dictId: row.dictId
				}).then(res=>{
					if(res.code == 200){
						ElMessage.success('删除成功')
						query()
					}else{
						ElMessage.error(res.message)
					}
				})
			})
			.catch(() => {
				ElMessage.info('取消删除')
			})
		}

		const delDictDatabtn = (row) => {
			console.log(row, 'row');
			ElMessageBox.confirm(
				'确认是否删除此数据?',
				'删除',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
			.then(() => {
				deleteDictData({ dictCode: row.dictCode}).then(res=>{
					if(res.code == 200){
						ElMessage.success('删除成功')
						queryDetail()
					}
				})
			})
		}

		const changeStatus = (row, val) => {
			ElMessageBox.confirm(
				'确认是否修改此状态?',
				'修改',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
			.then(() => {
				updateDictDataStatus({
					dictCode: row.dictCode,
					status: val
				}).then(res=>{
					if(res.code == 200){
						ElMessage.success('修改成功')
						queryDetail()
					}
				})
			})
		}

		const restQuery = () => {
			console.log('刷新了');
			query()
		}

		const restDetail = () => {
			data.queryParamsDetail = { pageNo: 1, pageSize: 10, total: 0 }
			data.formRef.resetFields()
			queryDetail()
		}

		const queryDetail = () => {
			console.log(data.selectType)
			getDictListByType({
				dictType: data.selectType,
				...data.form,
				...data.queryParams
			}).then(res=>{
				if(res.code == 200){
					data.tableData = res.data.rows
					data.queryParams.total = res.data.totalRows
				}
			})
		}

		onMounted(()=>{
			query()
		})

		return {
			...toRefs(data),
			queryDetail,
			handleOnClick,
			handleOnChange,
			restQuery,
			addDictDetailbtn,
			delDictDatabtn,
			restQueryDetail,
			changeStatus,
			restDetail,
			add,
			del
		}
	}
};
</script>
<style lang="scss" scoped>
.app-container{
	display: flex;
}
.menu-card{
	width: 400px;
}
.header_box{
	display: flex;
	justify-content: space-between;
}
.header_title{
	font-size: 16px;
	font-weight: bold;
}
</style>